<template>
    <div>
      <div class='layout'><div ><Tag class="size" color="red"><h2>考试中心</h2></Tag></div>
    <div><Tag checkable color="error">时段试卷</Tag></div></div>
    <div class='pos'><div v-for="(item, index) in  timeExamPage" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#iconxingtuxuetang-zhutikaoshi-"></use>
            </svg></div>
            <h4>{{item.examPageTitle}}</h4>
            <Button size='small'type="primary" @click="Test(index)" >进入考试</Button> 
    </Card></div></div> <Divider />
    <div><Tag checkable color="error">练习试卷</Tag></div>
    <div class='pos'><div v-for="(item, index) in  exerExamPage" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#iconwode-lianxikaoshi"></use>
            </svg></div>
            <h4>{{item.examPageTitle}}</h4>
            <Button size='small'type="primary" @click="Test(index)" >进入练习</Button> 
    </Card></div></div><Divider />
     <div><Tag checkable color="error">题库试卷</Tag></div>
      <div class='pos'><div v-for="(item, index) in  baseExamPage" :key="index">
      <Card style="width:150px;height:150px">
        <div style="text-align:center">
            <svg class="icon" aria-hidden="true">
             <use xlink:href="#icontiku_hover"></use>
            </svg></div>
            <h4>{{item.examPageTitle}}</h4>
            <Button size='small'type="primary" @click="Test(index)" >进入题库</Button> 
    </Card></div></div>
     

     
    </div>
</template>
<script>
export default {
  props: ["major", "studentName"],
  data() {
    return {
      teacherExampagesMsg: [],
      Major: this.major,
      studentName: this.studentName,
      timeExamPage:[],
      exerExamPage:[],
      baseExamPage:[],
    };
  },
  methods: {
    Test(index) {
      var checkOne = this.teacherExampagesMsg[index];
      this.$router.push({
        path: "/studentAnswerPage",
        query: { Msg: checkOne, studentName: this.studentName }
      });
    }
  },
  mounted() {
    var a = this.Major;
    var b = { major:a};
    console.log(b)
    this.$axios({
      method: "post",
      url: "http://" + this.urlpath + "/FindTeacherExamMsg",
      data: b
    }).then(res => {
      this.teacherExampagesMsg = res.data;
      this.teacherExampagesMsg.map(item=>{
        if(item.testType=='时段考卷'){
         this.timeExamPage.push(item)
        }
        else if(item.testType=='练习考卷'){
         this.exerExamPage.push(item)
        }else{
         this.baseExamPage.push(item)
        }
      })
    });
  }
};
</script>
<style scoped>
.layout{
  display: flex;
  flex-direction: column;
}
.icon {
  width: 4em;
  height: 4em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.pos{
    margin:20px 10px;
    padding: 10px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content:space-evenly;
}
.pos h4{
  width: 100px;
  white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis
}



</style>